<template>
	<view class="container">
		<!--头部start-->
		<!--</ad><view class="header">
			<u-status-bar></u-status-bar>
			<view class="index_header">
				<text>团队</text>
				<text class="on">邀请返佣</text>
				<text>提醒</text>
				<image src="/static/images/img_30.png" mode="widthFix" class="p_img"></image>
			</view>
		</view>
		<u-status-bar></u-status-bar>-->
		<!--头部end-->
		
		<!--邀请返佣start-->
		<view class="ds_tab">
			<view class="left">
				<text :class="navIndex==0?'active':''" @click="checkIndex(0)">快捷注册</text>
				<text :class="navIndex==1?'active':''" @click="checkIndex(1)">发送邀请</text>
			</view>
			<view class="right"><image src="/static/images/img_33.png" mode="widthFix"></image>注册记录</view>
		</view>
		
		<view v-show="tabBarIdx==1">
			<view v-show="navIndex==0">
				<view class="rg_form">
					<view class="tel_form">
						<view class="tel">
							<view class="type">
								<image :src="c_img"></image>
								<view @tap="open_choose">{{c_name}}</view>
							</view>
							<view class="inputs">
								<label>{{c_tel}}</label>
								<u-input type="number" placeholder="输入新会员手机号" value="" placeholderStyle="color: #A1A1A1" v-model="cusname" @focus="keyboard_show = true"></u-input>
								<image src="/static/images/img_07.png" class="tel_close" v-if="cusname.length>0" @click="cusname=''"></image>
							</view>
						</view>
						<view class="tel tel01">
							<view class="type">
								<image src="/static/images/img_34.png" mode="widthFix"></image>
								<view>姓名</view>
							</view>
							<view class="inputs">
								<u-input type="text" placeholder="输入新会员真实姓名" value="" placeholderStyle="color: #A1A1A1" v-model="cusnames"></u-input>
								<image src="/static/images/img_07.png" class="tel_close" v-if="cusnames.length>0" @click="cusnames=''"></image>
							</view>
						</view>
					</view>
					<view class="tel_form">
						<view class="tel tel02">
							<view class="type">
								<image src="/static/images/img_35.png" mode="widthFix"></image>
								<view>您的交易密码</view>
							</view>
							<view class="inputs">
								<u-input type="text" :password="showPassword" name="password" value="Tao543se" placeholderStyle="color: #C9CACA"></u-input>
								<view class="eye" :class="[showPassword==true?'':'on']" @click="ShowPwd"></view>
							</view>
						</view>
					</view>
					<button class="submit on" @tap="open_resiger">注册</button>
				</view>	
			</view>
			
			<view <view v-show="navIndex==1">
				<inviteFriend></inviteFriend>
			</view>
			<!--邀请返佣end-->
		</view>
		
		<!--键盘start-->
		<u-keyboard mode="number" ref="uKeyboard" @change="valChange" @backspace="backspace" :tooltip="tooltip" :dotDisabled="true" :show="keyboard_show" :closeOnClickOverlay="true" @close="key_close"></u-keyboard>
		<!--键盘end-->
		
		<u-popup :show="tel_show" :closeOnClickOverlay="true" @close="choose_popup_close">
			<view class="choose">
				<view class="tit">国际区号<image src="/static/images/img_31.png" mode="widthFix"  @tap="choose_popup_close"></image></view>
				<view class="list">
					<view v-for="(item,index) in items" :key="index" :class="{active:count == index}" @click="change(index,item)">
						<image :src="item.url"></image>
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
		</u-popup>
		<!--弹窗end-->
		
		<!--注册start-->
		<u-popup mode="bottom" :show="rg_box" :closeOnClickOverlay="true" @close="rg_popup_close">
			<view class="rb_box">
				<image src="../../static/images/img_11.png" mode="widthFix"></image>
				<view class="tit">快捷注册成功</view>
				<view class="copy">
					<view class="c_list">
						<view>姓名：{{copy_name}}</view>
						<view>手机：<text>{{copy_tel}}</text></view>
						<view>密码：<text>{{copy_code}}</text></view>
					</view>
					<view class="c_intro">
						<view><image src="../../static/images/img_37.png" mode="widthFix"></image>登录账户与手机为同一号码</view>
						<view><image src="../../static/images/img_37.png" mode="widthFix"></image>姓名与手机在完善资料时可修改一次</view>
						<view><image src="../../static/images/img_37.png" mode="widthFix"></image>妥善保存注册信息以防泄露</view>
					</view>
					<image src="/static//images/img_36.png" mode="widthFix" @tap="copy"></image>
				</view>
				<view class="btn">
					<button class="submit on" @tap="rg_popup_close">查看记录</button>
					<u-safe-bottom customStyle="background: #fff"></u-safe-bottom>
				</view>
			</view>
		</u-popup>
		<!--注册end-->
		
		<!--底部start-->
		<u-safe-bottom></u-safe-bottom>
		<!--<view class="footer">
			<view class="list">
				<view class="icon icon01"></view>
				<view class="icon icon02 active"></view>
				<view class="icon icon05"></view>
				<view class="icon icon03"></view>
				<view class="icon icon04"></view>
			</view>
			<u-safe-bottom customStyle="background: #fff"></u-safe-bottom>
		</view>-->
		<!--底部end-->
	</view>
</template>


<script>
	import uniCopy from '@/components/js_sdk/xb-copy/uni-copy.js'
    import inviteFriend from "../team/invite_friend.vue";
	
	export default{
		components: {
		    /***** mescroll S *****/
		    //注册组件
		    inviteFriend
		    /***** mescroll E *****/
		},
		data(){
			return{
				yan_show: false,
				content:'此ID不存在，请重新输入',
				confirmText:"关闭",
				tel_show: false,
				items: [
					{
						url:'/static/images/img_03.png',
						name:"CN",
						tel:"+86"
					},
					{
						url:'/static/images/img_04.png',
						name:"US",
						tel:"+1"
					},
					{
						url:'/static/images/img_05.png',
						name:"IN",
						tel:"+91"
					}
				],
				count: "",
				c_img:"/static/images/img_03.png",
				c_name:"CN",
				cusname:"",
				keyboard_show: false,
				tooltip:false,
				c_tel:"+86",
				cusnames:'',
				showPassword: true,
				rg_box:false,
				copy_name:"张老三",
				copy_tel:"13968844888",
				copy_code:"570963",
				navIndex: 0,
			}
		},
		methods:{
			yan_open(){
				this.yan_show = true
			},
			confirm(){
				this.yan_show = false
			},
			open_choose(){
				this.tel_show = true
			},
			choose_popup_close(){
				this.tel_show = false
			},
			change(e,item) {
			    this.count = e,
				this.tel_show = false,
				this.c_name = item.name,
				this.c_img = item.url,
				this.c_tel = item.tel
			},
			valChange(val) {
				this.cusname += val;
			},
			backspace(){
				if(this.cusname.length) this.cusname = this.cusname.substr(0, this.cusname.length - 1);
			},
			key_close(){
				this.keyboard_show =false
			},
			ShowPwd(){
				this.showPassword = !this.showPassword
			},
			open_resiger(){
				this.rg_box = true
			},
			rg_popup_close(){
				this.rg_box = false
			},
			copy() {
			    uniCopy({
			        content: this.copy_name + '  ' + this.copy_tel + '  ' + this.copy_code,
			        success:(res)=>{
			             uni.showToast({
			                title: res,
			                icon: 'none'
			            })
			        },
			    })
			},
			checkIndex(index) {
				console.log(index)
				this.navIndex = index;
			},	 
		}
	}
</script>

<style lang="scss">
	@import url("../../common/style.scss");
	@import url("team.scss");
</style>